<template lang="html">
  <footer class="footer">

    <div class="footer-result">
      <p>茶籽：<span>{{ totalTeaSeedNum }} </span>颗</p>
      <p>金额：<span>{{ price }} </span>元</p>

    </div>
    <a class="footer-pay" @click="goPay">
      去结算
    </a>
  </footer>

</template>

<script>

export default {
  props: {
    totalPrice: {
      type: Number,
      default: 0
    },
    totalTeaSeedNum:{
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      price: 0,
      totalTeaSeed: 0
    }
  },
  computed: {
    // 勾选的商品数量
    count() {
      // 如果已选择列表为空 就返回0
      if (this.$store.getters.selectedList == undefined) {
        return 0
      } else {
        return this.$store.getters.selectedList.length
      }
    },

    //勾选的商品的价格总和
    allpay() {
      let all = 0;
      // 如果有勾选商品,计算总价格
      if (this.$store.getters.selectedList != undefined) {
        for (let i = 0; i < this.$store.getters.selectedList.length; i++) {
          all += this.$store.getters.selectedList[i].price;
        }
      }
      // 没有勾选 即为0
      return all
    }
  },

  methods: {
    //点击跳转到支付页
    goPay() {
      // 如果有选择商品才能跳转
      this.$emit('goPay')
    }
  },
  watch: {
    totalPrice(val) {
      this.price = val.toFixed(2)
    },
    totalTeaSeedNum(val) {
      this.totalTeaSeed = val.toFixed(2)
    }
  }
}
</script>

<style lang="less" scoped>
@import "../../assets/fz.less";

.footer {
  width: 100%;
  height: 16vw;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  align-items: center;
  position: fixed;
  bottom: 60px;
  left: 0;
  background-color: #ffffff;

  .footer-result,
  a {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: center;
  }

  .footer-result {
    p {
      .fz(font-size, 24);
      color: #999;
    }

    p {
      padding: 1vw 0 0 1vw;
      span {
        color: #048AB9;
        .fz(font-size, 42);
      }
    }
  }

  .footer-goon {
    background-color: #f4f4f4;
    line-height: 16vw;
  }

  .footer-pay {
    background-color: #048AB9;
    line-height: 16vw;
    color: #fff;
  }
}
</style>
